	window.onload = function(){
			var ul1 = getByClass("buttons")[0];
			var btns = ul1.getElementsByTagName('li');
			var scorllContent = getByClass("scrollContent")[0];
			var player = new Player(btns,scorllContent,480,"hover",3000);
		}
	
	  function Player(buttons,scorllContent,imgHeight,hoverClass,timeout){
	  	this.buttons = buttons;
	  	this.scorllContent = scorllContent;
	  	this.imgHeight = imgHeight ;
	  	this.hoverClass = hoverClass||"hover";
	  	this.timeout = timeout||3000;
	  	this.invoke(0);
	  	this.start();
	  	for(var i=0;i<this.buttons.length;i++){
	  		  var _this = this;
					this.buttons[i].onmouseover = function(){
						_this.stop();
						_this.invoke(this.index);
					}
					this.buttons[i].onmouseout = function(){
					  _this.start();
					}
				this.buttons[i].index = i;
	  	}
	  }
	  
	  Player.prototype = {
	    start:function(){
	    	var _this = this;
	    	this.stop();
	    	this.interval = setInterval(function(){
	    	  _this.next();	
	    	},this.timeout);
	    },
	    invoke:function(n){
	    	this.clearHoverClass();
	    	var _this = this;
	    	var top = parseInt(this.scorllContent.style.top)||0;
	    	var vtop = -(n*this.imgHeight);
	    	
	    	
	    	$(this.scorllContent).stop().fadeOut(800,function(){
	    		_this.scorllContent.style.top = vtop+"px";
	    		$(".scrollContent").fadeIn(700);
	    	})
	    	//$(".scrollContent").fadeIn(1000);
	    	this.curItem = this.buttons[n];
	    	this.curItem.index = n;
	    	this.curItem.className = this.hoverClass;
	    },
	    stop:function(){
	    	clearInterval(this.interval);
	    },
	    imgOut:function(){
	    	
	    },
	    imgIn:function(n){
	    	
	    },
	    next:function(){
	    	var nextIndex = this.curItem.index+1;
	    	if(nextIndex>=this.buttons.length){
	    		nextIndex = 0;
	    	}
	    	this.invoke(nextIndex);
	    },
	    clearHoverClass:function(){
	    	
	    	console.log("out:"+$(".scrollContent").css("top"));
	    	//$(this.scorllContent).stop().fadeOut(1000);
	    	for(var i=0;i<this.buttons.length;i++){
	    		this.buttons[i].className = "";
	    	}
	    }	
	  }
	  
	  function getByClass(className,context) {
			context=context || document;
			if (context.getElementsByClassName) {
				return context.getElementsByClassName(className);
			}
			var nodes=context.getElementsByTagName('*'),
					ret=[];
			for (var i=0;i<nodes.length;i++) {
				if (hasClass(nodes[i],className)) ret.push(nodes[i]);
			}
			return ret;
		}
		
		function hasClass(node,className){
			var names = node.className.split(/\s+/);
			for(var i=0;i<names.length;i++){
				if(names[i]==className)return true;
			}
			return false;
		}
		function firstChild(node){
			
			if(node.firstChild){
				if(node.firstChild.nodeType==1)return node.firstChild;
				else{
					var n = node.firstChild;
				  while(n = n.nextSibling){
				  	if(n.nodeType==1)return n;
				  }	
				  return null;
				}
			}
			return null;
		}
		function next(node){
			if(node.nextSibling){
				if(node.nextSibling.nodeType==1)return node.nextSibling;
				else{
					var n = node.nextSibling;
				  while(n = n.nextSibling){
				  	if(n.nodeType==1)return n;
				  }	
				  return null;
				}
			}
			return null;
		}
		
		/*参数说明
		curTime:当前时间，即动画已经进行了多长时间，开始时间为0
		start:开始值
		dur:动画持续多长时间
		alter:总的变化值
		*/
		function animate(o,start,alter,dur,fx) {
			var curTime=0;
			var t=setInterval(function () {
				if (curTime>=dur) clearInterval(t);
				for (var i in start) {
					o.style[i]=fx(start[i],alter[i],curTime,dur)+"px";
				}
				curTime+=50;
				
			},50);
			return function(){
			  clearInterval(t);	
			}
		}
		function Linear(start,alter,curTime,dur) {
			return start+curTime/dur*alter;
		}//最简单的线性变化,即匀速运动
		
		function Quad(start,alter,curTime,dur) {
			return start+Math.pow(curTime/dur,2)*alter;
		}
		
		function formatDate(s,t){
			t = t||new Date();
			var re = /Y|m|d|H|i|s/g;
			var news = s.replace(re,function($1){
				switch($1){
					case 'Y':return t.getFullYear();
					case 'm':return t.getMonth()+1;
					case 'd':return t.getDate();
					case 'H':return t.getHours();
					case 'i':return t.getMinutes();
					case 's':return t.getSeconds();
				}
				return $1;
			});
			return news;
		}
		
		function addEvent(obj,evt,fn) {
	if (obj.addEventListener) {
		obj.addEventListener(evt,fn,false);
		return obj;
	}
		
		
	if (!obj.functions) obj.functions={};
	if (!obj.functions[evt])
		obj.functions[evt]=[];
		
		//obj.functions["mousedown"]=[]
	var functions=obj.functions[evt];
	for (var i=0;i<functions.length;i++) {
		if (functions[i]===fn) return obj;
	}
	functions.push(fn);
	//fn.index=functions.length-1;
	
	
	if (typeof obj["on"+evt]=="function") {
		//alert(obj["on"+evt]);//当这一行执行到时，obj["on"+evt] 就是handler
		//alert(obj["on"+evt]==handler);
		if (obj["on"+evt]!=handler)
			functions.push(obj["on"+evt]);
	}
	obj["on"+evt]=handler;
	return obj;
	
	
}

function delEvent(obj,evtype,fn) {
	if (obj.removeEventListener) {
		obj.removeEventListener(evtype,fn,false);
		return obj;
	}
	var fns=obj.functions || {};
	fns=fns[evtype] || [];
	for (var i=0;i<fns.length;i++) {
		if (fns[i]==fn) {
			fns.splice(i,1);
			return obj;
		}
	}
}

function handler(evt) {//哪个事件发生了?
	//对event对象标准化
	var evt=fixEvt(evt || window.event,this);
	var evtype=evt.type;
	var functions=this.functions[evtype];
	for (var i=0;i<functions.length;i++) {
		if (functions[i]) functions[i].call(this,evt);
	}
}

function fixEvt(evt,o) {
	if (!evt.target) {//IE
		evt.target=evt.srcElement;
		if (evt.type=="mouseover")
			evt.relatedTarget=evt.fromElement;
		else if ("mouseout"==evt.type)
			evt.relatedTarget=evt.toElement;
		
		evt.pageX=evt.clientX+document.documentElement.scrollLeft;
		evt.pageY=evt.clientY+document.documentElement.scrollTop;
		evt.stopPropagation=function () {
			evt.cancelBubble=true;
		};
		evt.preventDefault=function () {
			evt.returnValue=false;
		};
	}
	
	//IE与Opera的offsetX,offsetY没有将边框算进之内
	if (o!=window && o.nodeType) {//要求是一个DOM对象
		//evt.layerX=evt.offsetX+o.clientLeft;
		//evt.layerY=evt.offsetY+o.clientTop;
		//如何获取一个DOM元素在页面中的坐标
		var offset=getOffset(o);
		evt.layerX=evt.pageX-offset.x;
		evt.layerY=evt.pageY-offset.y;
		
	}
	
	
	return evt;
}
function opacityAnimate(o,start,alter,dur,fx){
	var curTime = 0;
	var t=setInterval(function () {
		if (curTime>=dur) clearInterval(t);
		setOpcity(o,fx(start,alter,curTime,dur));
		curTime+=50;
		
	},50);
	return function(){
		clearInterval(t);	
	}
}
var setOpcity = (document.documentElement.filter)?function(obj,val){
	obj.innerHTML = val;
	obj.style.filter = "alpha(opacity="+val+")";
}:function(obj,val){
	//console.log(obj.style.opcity+"-->"+obj.tagName);
	obj.style.opacity = val/100;
};